<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/static/bootstrap/dashboard.css" rel="stylesheet">
    <link href="/static/bootstrap/site.min.css" rel="stylesheet">
    <script src="/static/jquery/jquery-1.11.2.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/js/tools.js"></script>
    <link href="/static/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="/static/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <!-- jPList js and css  -->
    <link href="/static/jquery/jquery-plugins/jplist/css/jplist-core.min.css" rel="stylesheet" type="text/css" />
    <script src="/static/jquery/jquery-plugins/jplist/js/jplist-core.min.js"></script>

    <!-- jplist pagination bundle -->
    <script src="/static/jquery/jquery-plugins/jplist/js/jplist.pagination-bundle.min.js"></script>
    <link href="/static/jquery/jquery-plugins/jplist/css/jplist-pagination-bundle.min.css" rel="stylesheet" type="text/css" />

    <!-- jplist history bundle -->
    <script src="/static/jquery/jquery-plugins/jplist/js/jplist.history-bundle.min.js"></script>
    <link href="/static/jquery/jquery-plugins/jplist/css/jplist-history-bundle.min.css" rel="stylesheet" type="text/css" />

    <!-- preloader -->
    <script src="/static/jquery/jquery-plugins/jplist/js/jplist.preloader-control.min.js"></script>
    <link href="/static/jquery/jquery-plugins/jplist/css/jplist-preloader-control.min.css" rel="stylesheet" type="text/css" />

    <!-- filter dropdown control -->
    <script src="/static/jquery/jquery-plugins/jplist/js/jplist.filter-dropdown-bundle.min.js"></script>
    <script src="/static/handlebars-v3.0.3.js"></script>
    <script src="/static/layer/layer.js"></script>
    <link href="/static/bootstrap/css/bootstrap-switch.css" rel="stylesheet">
    <script src="/static/bootstrap/js/bootstrap-switch.min.js"></script>
    <style type="text/css">
        #ip_pool{padding: 5px;}
        #ip_pool .btn-group{margin: 4px 5px;}
        .t_lable{display: inline-block; margin-right: 15px; font-weight: normal;}
        .t_lable input{margin-right: 4px;}
        .t_input{width: 400px; height: 28px;}
    </style>
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-9" style="margin-bottom: 20px;">
            <div id="jplist-page-area" class="box jplist">

                <!-- ios button: show/hide panel -->
                <div class="jplist-ios-button">
                    <i class="fa fa-sort"></i>
                    jPList Actions
                </div>

                <!-- panel -->
                <div class="jplist-panel box panel-top">
                    <button type="button"
                            class="btn btn-primary"
                            data-action="addSetting" data-group_id="<?php echo $group_id;?>"
                            data-class="action" data-title="新增配置"
                            data-url="<?php echo $actions['addSetting'];?>">新增配置</button>

                    <!-- reset button -->
                    <button
                            type="button"
                            class="jplist-reset-btn"
                            data-control-type="reset"
                            data-control-name="reset"
                            data-control-action="reset">
                        重置 &nbsp;<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
                    </button>

                    <div
                            class="jplist-drop-down"
                            data-control-type="items-per-page-drop-down"
                            data-control-name="paging"
                            data-control-action="paging">

                        <ul>
                            <li><span data-number="3"> 每页 3 条 </span></li>
                            <li><span data-number="5"> 每页 5 条 </span></li>
                            <li><span data-number="10" data-default="true"> 每页 10 条 </span></li>
                            <li><span data-number="20"> 每页 20 条 </span></li>
                            <li><span data-number="50"> 每页 50 条 </span></li>
                        </ul>
                    </div>

                    <!-- pagination results -->
                    <div
                            class="jplist-label"
                            data-type="Page {current} of {pages}"
                            data-control-type="pagination-info"
                            data-control-name="paging"
                            data-control-action="paging">
                    </div>

                    <!-- pagination -->
                    <div
                            class="jplist-pagination"
                            data-control-type="pagination"
                            data-control-name="paging"
                            data-control-action="paging">
                    </div>

                    <!-- preloader for data sources -->
                    <div
                            class="jplist-hide-preloader jplist-preloader"
                            data-control-type="preloader"
                            data-control-name="preloader"
                            data-control-action="preloader">
                        <img src="/static/jquery/jquery-plugins/jplist/img/common/ajax-loader-line.gif" alt="Loading..." title="Loading..." />
                    </div>

                </div>

                <!-- ajax content here -->
                <div class="list box text-shadow"></div>

                <!-- no result found -->
                <div class="box jplist-no-results text-shadow align-center jplist-hidden">
                    <p>暂无结果</p>
                </div>

                <!-- ios button: show/hide panel -->
                <div class="jplist-ios-button">
                    <i class="fa fa-sort"></i>
                    jPList Actions
                </div>


            </div>
        </div>
    </div>

    <div class="table-responsive">
        <form id="setting_form">
            <table data-filter="#filter" class="table table-bordered table-hover" id="LIST" style="margin:0px;">
                <thead>
                <tr>
                    <th  data-sort-ignore="true" style="text-align: center;" data-class="expand">配置ID</th>
                    <th  data-sort-ignore="true" style="text-align: center;">配置标题</th>
                    <th width="30%" data-sort-ignore="true" style="text-align: center;">配置key</th>
                    <th width="30%" data-sort-ignore="true" style="text-align: center;">配置value</th>
                    <th  data-sort-ignore="true" style="text-align: center;">所属分组</th>
                    <th  data-sort-ignore="true" style="text-align: center;">配置描述</th>
                    <th  data-sort-ignore="true" style="text-align: center;">操作</th>
                </tr>
                </thead>
                <tbody id="member_cname_list">

                </tbody>
                <tr>
                    <td>
                        <button class="btn btn-primary"
                                data-action="saveSetting"
                                data-class="action"
                                data-url="<?php echo $actions['saveSetting'];?>">保存</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(function(){

        $(document).off('click', "[data-class='action']").on('click', "[data-class='action']", function(){

            var action = $(this).data("action");
            var _this = $(this);
            switch(action){
                case 'addSetting':
                    $.get(
                        _this.attr('data-url'),
                        {group_id: _this.attr('data-group_id')},
                        function(res){
                            var handlebar = Handlebars.compile($('#add_setting_tpl').html());
                            layer.open({
                                type: 1,
                                'title': _this.attr('data-title'),
                                area: ['50%', '70%'], //宽高
                                content: handlebar(res.data)
                            });
                            $("input[name=status]").bootstrapSwitch();
                        }
                    );
                    break;
                case 'saveAdd':
                    $.post(
                            "<?php echo $actions['addSetting'];?>",
                            $(this).parents('form').serialize(),
                            function(data){
                                if(data.status == 1){
                                    layer.msg('添加成功',{icon:6, time:1000},function(){
                                        layer.closeAll('page');
                                        render_jplist();
                                    });
                                }else{
                                    layer.msg(data.info, {icon:0});
                                }
                            }
                    );
                    break;
                case 'saveSetting':
                    $.post(
                        _this.attr('data-url'),
                        $('#setting_form').serialize(),
                        function(data){
                            if(data.status == 1){
                                layer.msg('编辑成功',{icon:6, time:1000},function(){
                                    layer.closeAll('page');
                                    render_jplist();
                                });
                            }else{
                                layer.msg(data.info, {icon:0});
                            }
                        }
                    );
                    break;
                case 'deleteSetting':
                    layer.confirm('确定要删除么？', {icon: 3, title:'提示'}, function(index){
                        //do something
                        if(index){
                            $.post(
                                _this.attr('data-url'),
                                {id: _this.attr('data-id')},
                                function(res){
                                    layer.msg(res.info, {icon:res.status});
                                    res.status == 1 && render_jplist();
                                }
                            );
                        }
                    });
                    break;
                default:break;
            }

            return false;
        });

        function render_jplist(){
            var $list = $('#member_cname_list')
                    , template = Handlebars.compile($('#jplist-template').html());

            //init jplist with php + mysql data source, json and Mustache template
            $('#jplist-page-area').jplist({
                itemsBox: '.list'
                , itemPath: '.list-item'
                , panelPath: '.jplist-panel'
                , dataSource: {
                    type: 'server'
                    , server: {
                        //ajax settings
                        ajax: {
                            url: "<?php echo $actions['getSettingList'];?>"
                            , dataType: 'json'
                            , type: 'POST'
                            , data: {group_id: "<?php echo $group_id;?>"}
                        }
                    }
                    //render function for json + templates like Mustache, xml + xslt etc.
                    , render: function (dataItem, statuses) {
                        $list.html(template(dataItem.content));
                        $(document).find("input[data-class=switch]").bootstrapSwitch();
                    }
                }

            });
        }

        render_jplist();

        Handlebars.registerHelper("formatConfigGroup",function(config_groupid, group_list, options){
            var config_group_html = '';
            $.each(group_list, function(index, ele){
                var checked_html = ele.id == config_groupid ? 'selected=""' : '';
                config_group_html += '<option value="'+ele.id+'"'+checked_html+' >'+ele.name+'</option>';
            });
            return config_group_html;
        });

        Handlebars.registerHelper("formatConfigValue",function(config_value, id ,options){
            var config_value_html = '';
            switch (config_value){
                case 'false':
                    config_value_html = '<div class="switch has-switch"><input data-on-text="启用" data-off-text="禁用" name="config_value['+id+']" type="checkbox" data-id="" data-class="switch" data-url=""/></div>';
                    break;
                case 'true':
                    config_value_html = '<div class="switch has-switch"><input checked="checked" data-on-text="启用" data-off-text="禁用" name="config_value['+id+']" type="checkbox" data-id="" data-class="switch" data-url=""/></div>';
                    break;
                default :
                    config_value_html = '<input class="form-control" name="config_value['+id+']" value="'+config_value+'" />';
                    break;
            }
            return config_value_html;
        });
    });
</script>

<!-- Mustache template -->
<script id="jplist-template" type="x-tmpl-mustache">
    {{#list}}
        <tr>
            <td style="text-align:center;">{{id}}</td>
            <td style="text-align:center;">{{config_title}}</td>
            <td style="text-align:center;">{{config_key}}</td>
            <td style="text-align:center;">
                {{{formatConfigValue config_value id}}}
            </td>
            <td style="text-align:center;">
                <select name="config_groupid[{{id}}]">
                {{{formatConfigGroup config_groupid ../group_list}}}
                </select>
            </td>
            <td style="text-align:center;">{{config_description}}</td>
            <td style="text-align:center;">
                <div class="btn-group" role="group" aria-label="...">
                    <input type="hidden" name="ids[{{id}}]" value={{id}} />
                    <button type="button" class="btn btn-danger" data-class="action" data-action="deleteSetting" data-url="<?php echo $actions['deleteSetting'];?>" data-id="{{id}}">删除</button>
                </div>
            </td>
        </tr>
    {{/list}}
</script>


<!--增加用户模板-->
<script type="text/template" id="add_setting_tpl">
    {{#.}}
    <div class="container-fluid">
        <form>
            <table class="table table-bordered" style="margin-top: 20px;">
                <tbody>
                <tr>
                    <td>配置名称*</td>
                    <td>
                        <input name="config_title" value="" class="form-control input-sm" placeholder="配置名称" />
                    </td>
                </tr>
                <tr>
                    <td>key</td>
                    <td>
                        <input name="config_key" value="" class="form-control input-sm" placeholder="key" />
                    </td>
                </tr>
                <tr>
                    <td>value</td>
                    <td>
                        <input name="config_value" value="" class="form-control input-sm" placeholder="value" />
                    </td>
                </tr>

                <tr>
                    <td>描述</td>
                    <td>
                        <textarea class="form-control" name="config_description"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>配置分组</td>
                    <td style="text-align:center;">
                        <select name="config_groupid">
                            {{{formatConfigGroup group_id ../group_list}}}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>
                        <button type="button" class="btn btn-primary" data-class="action" data-action="saveAdd">保存</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
    {{/.}}
</script>
</body>

</html>